<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>GOWN.js example: PickerList</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #000000;
        }
    </style>
    <script src="../../lib/pixi/pixi.js"></script>
    <script src="../../dist/gown.js"></script>
</head>
<body>
<script>
    var stage = new PIXI.Container();
    var sizes = {w: 800, h: 600};
    var renderer = PIXI.autoDetectRenderer(sizes.w, sizes.h, {backgroundColor : 0xffffff});
    document.body.appendChild(renderer.view);

	//var metalTheme = new GOWN.ThemeParser("../../themes/assets/metalworks_desktop/metalworks_desktop.json");
	var aeonTheme = new GOWN.ThemeParser("../../themes/assets/aeon_desktop/aeon_desktop.json");

    function onCompleteAeon() {
        // TODO: implement sth. similar to the DropDownPopUpcontentManager
        // and do NOT add the children to the PickerList directly
        // see https://github.com/BowlerHatLLC/feathers/blob/master/source/feathers/controls/popups/DropDownPopUpContentManager.as
        var list = new GOWN.PickerList(aeonTheme);
        list.dataProvider = new GOWN.ListCollection([
            { text: "Milk" },
            { text: "Eggs" },
            { text: "Bread" }
        ]);
        list.width = 100;
        list.height = 44;
        list.itemRendererProperties = {
            labelField: 'text'
        };

        // TODO: remove this and set fixed width/height in DefaultListItemRenderer
        list.itemRendererFactory = function(theme) {
            var item = new GOWN.DefaultListItemRenderer(theme);
            item.width = 100;
            item.height = 44;
            // TODO: important! do not set pecentWidth/percentHeight in the
            // DefaultListItemRenderer
            item.percentWidth = item.percentHeight = -1;
            return item;
        };
        // TODO: calculate height of list based on items inside it!
        list._listFactory = function(theme) {
            var list = new GOWN.List(theme);
            list.width = 100;
            list.height = 3 * 44;
            return list;
        }

        stage.addChild(list);

        requestAnimationFrame(animate);
    }

	//metalTheme.once(GOWN.Theme.COMPLETE, onCompleteMetal, this);
    aeonTheme.once(GOWN.Theme.COMPLETE, onCompleteAeon, this);

    function animate() {
        // render the stage
        renderer.render(stage);
        requestAnimationFrame(animate);
    }
    GOWN.loader.load();
</script>

</body>
</html>
